import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, DatePicker, Modal, message} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import CashStandardTable from '../../components/CashStandardTable';
import UserCreateModal from '../../components/user/UserCreateModal';
import styles from './UserList.less';
import CashUnCheckModal from "../../components/Cash/CashUnCheckModal";


const {RangePicker} = DatePicker;

const FormItem = Form.Item;
const {Option} = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');


@connect(state => ({
    cash: state.cash,
}))
@Form.create()
export default class CashList extends PureComponent {
    state = {
        expandForm: false,
        selectedRows: [],
        formValues: {},
        type: 'email',
        item:null
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({
            type: 'cash/fetch',
        });
    }

    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});

        const params = {
            page: pagination.current,
            size: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        if (sorter.field) {
            console.log(sorter.order);
            // params.sorter = `${sorter.field}_${sorter.order}`;
            params.order = sorter.order;
            params.sorter = sorter.field;
        }

        dispatch({
            type: 'cash/fetch',
            payload: params,
        });
    }

    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type: 'cash/fetch',
            payload: {},
        });
    }

    toggleForm = () => {
        this.setState({
            expandForm: !this.state.expandForm,
        });
    }

    handleMenuClick = (e) => {
        const {dispatch} = this.props;
        const {selectedRows} = this.state;

        if (!selectedRows) return;

        switch (e.key) {
            case 'remove':
                dispatch({
                    type: 'cash/remove',
                    payload: {
                        ids: selectedRows.map(row => row.id),
                    },
                    callback: () => {
                        this.setState({
                            selectedRows: [],
                        });
                    },
                });
                break;
            default:
                break;
        }
    }

    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        });
    }

    handleSearch = (e) => {
        e.preventDefault();

        const {dispatch, form} = this.props;

        form.validateFields((err, fieldsValue) => {
            if (err) return;

            const values = {};
            if (fieldsValue.keyword) {
                values.type = this.state.type;
                values.keyword = fieldsValue.keyword;
            }
            if (fieldsValue.created_at) {
                values.created_at = fieldsValue.created_at.map(item => item.format('YYYY-MM-DD HH:mm:ss'));
            }
            this.setState({
                formValues: values,
            });

            dispatch({
                type: 'cash/fetch',
                payload: values,
            });
        });
    }

    handleModalVisible = (flag) => {
        this.props.dispatch({
            type: 'cash/changeVisible',
            payload: true,
            callback: () => {
                console.log('回调');
            },
        });
    }
    handleStatus = (status) => {
        if(status == 0){
            console.log(this.state.selectedRows);
            this.props.dispatch({
                type: 'cash/check',
                payload: {
                    status,
                    items: this.state.selectedRows,
                },
                callback: () => {
                    this.setState({
                        selectedRows: [],
                    });
                    this.props.dispatch({
                        type: 'cash/fetch',
                    })
                },
            });
        }else if(status == 1){
            console.log(this.state.selectedRows);
            this.props.dispatch({
                type: 'cash/uncheck',
                payload: {
                    status,
                    items: this.state.selectedRows,
                },
                callback: () => {
                    this.setState({
                        selectedRows: [],
                    });
                    this.props.dispatch({
                        type: 'cash/fetch',
                    })
                },
            });
        }

    }
    handleCheck = (item) => {
        console.log(item);
        this.props.dispatch({
            type: 'cash/check',
            payload: {
                status,
                ids: [item.id],
            },
            callback: () => {
                this.setState({
                    selectedRows: [],
                });
                this.props.dispatch({
                    type: 'cash/fetch',
                })
            },
        });
    }

    handleUnCheck = (item) => {
        console.log(item);
        this.setState({
            item:item
        })
        this.props.dispatch({
            type: 'cash/changeModal',
            payload: true,
        });
    }

    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;

        return (
          <Form onSubmit={this.handleSearch} layout="inline">
            <Row gutter={{md: 8, lg: 24, xl: 48}}>
              <Col md={8} sm={24}>
                <FormItem label="订单号">
                  {getFieldDecorator('keyword')(
                    <Input  placeholder="订单号" />
                            )}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="申请时间">
                  {getFieldDecorator('created_at')(
                    <RangePicker />
                            )}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <span className={styles.submitButtons}>
                  <Button type="primary" htmlType="submit">查询</Button>
                  <Button style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</Button>
                </span>
              </Col>
            </Row>
          </Form>
        );
    }

    unCheckClick = (id)=>{

    }

    renderForm() {
        return this.renderSimpleForm();
    }

    render() {
        const {cash: {loading, data}} = this.props;
        const {selectedRows} = this.state;
        const menu = (
          <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
            <Menu.Item key="remove">删除</Menu.Item>
          </Menu>
        );
        return (
          <PageHeaderLayout title="提现申请">
            <Card bordered={false}>
              <div className={styles.tableList}>
                <div className={styles.tableListForm}>
                  {this.renderForm()}
                </div>
                <div className={styles.tableListOperator}>

                  {
                                selectedRows.length > 0 && (
                                <span>
                                  <Button type="primary" onClick={() => this.handleStatus(0)}>通过审核
                                  </Button>
                                </span>
                                )
                            }
                </div>
                <CashStandardTable
                  selectedRows={selectedRows}
                  loading={loading}
                  data={data}
                  onCheckClick={this.handleCheck}
                  onUnCheckClick={this.handleUnCheck}
                  onSelectRow={this.handleSelectRows}
                  onChange={this.handleStandardTableChange}
                />
              </div>
            </Card>
            <CashUnCheckModal item={this.state.item} onCashChange={()=>{this.props.dispatch({
                type: 'cash/fetch',
            })}} />
          </PageHeaderLayout>
        );
    }
}
